<template>

	<view class="">
		<view class="demo-swiper">
			<!-- 第一行文字：海报选择 -->
			<view class="biaotou">
				<view style="display: flex;color: white;margin-left: 20rpx; flex: 1;" @click="fanhui">
					<uni-icons color="white" type="back"></uni-icons>
				</view>
				<view style="display: flex; flex: 1;justify-content: center;">
					邀请好友来使用
				</view>
				<view style="flex: 1;"></view>
			</view>
			<view class="zhuangshi">
				
			</view>
			<!-- 第二行 大图片，包含下方的昵称等信息 -->
			<view class="haibao">
				<z-swiper ref="zSwiper" v-model="list" :options="options">
					<z-swiper-item v-for="(item,index) in list" :key="index">
						<image style=" display: flex;margin:20rpx auto 10rpx auto;border-radius: 20rpx 20rpx 0 0;"
							:src="item" mode="widthFix"></image>
						<!-- 下面是昵称推荐码和二维码 -->
						<view class="box">
							<view style="display: flex;flex-direction: row;">
								<!-- 左侧部分 -->
								<view style="display: flex;flex: 1;align-items: center;justify-content: center;">
									<view style="display: flex;flex-direction: column;justify-content: center;">
										<view
											style="display: flex;font-size: 40rpx;line-height: 60rpx;font-weight: 600;border-bottom: 1rpx solid #eee;justify-content: center;">
											推荐人手机号
										</view>
										<view
											style="display: flex;flex: 1;font-size: 35rpx;border-bottom: 1rpx solid #eee;line-height: 60rpx;">
											{{meiyi_name_tel.mobile}}
										</view>
									</view>
								</view>
								<!-- 右侧部分 -->
								<view style="display: flex;flex:1;justify-content: center;align-items: center;">
									<tki-qrcode ref="qrcode" :val="val" :size="size" :unit="unit" :onval="onval"
										:loadMake="loadMake" :usingComponents="usingComponents"
										:showLoading="showLoading" :loadingText="loadingText" />
								</view>
							</view>
						</view>
					</z-swiper-item>
				</z-swiper>
			</view>
			<!-- 第三行小图片，选择用的 -->
			<z-swiper ref="zSwiperThumbs" v-model="list" :options="optionsThumbs" @swiper="setThumbsSwiper">
				<z-swiper-item v-for="(item,index) in list" :key="index">
					<image class="thumbImage" :src="item" mode="widthFix">
					</image>
				</z-swiper-item>
			</z-swiper>
		</view>
	</view>
</template>

<script>
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	const app = getApp();
	var that;
	export default {
		components: {
			tkiQrcode,
		},
		data() {
			return {
				optionsThumbs: {
					spaceBetween: 6,
					slidesPerView: 5,
					freeMode: true,
					watchSlidesProgress: true,
					thumbs: {
						use: true
					}
				},
				options: {
					spaceBetween: 10,
					thumbs: {
						swiper: true
					}
				},
				list: [],
				qrcode: '',
				val: '',
				size: parseInt(4 * (20 * (parseInt(uni.getSystemInfoSync().windowWidth) / 320))),
				unit: 'px',
				onval: true,
				loadMake: true,
				usingComponents: true,
				showLoading: true,
				loadingText: '二维码生成中',
			}
		},
		onLoad() {
			this.huoqufenxianghaibao()
			this.meiyi_name_tel = uni.getStorageSync('meiyi_name_tel')
			this.val = 'http://dance.dfckpay.com/#/uni_modules/uni-id-pages/pages/register/register?tel=' + this
				.meiyi_name_tel.mobile + '&id=' + this.meiyi_name_tel._id;
		},
		methods: {
			//获取分享海报
			huoqufenxianghaibao() {
				uniCloud.callFunction({
					name: "delpic",
					data: {
						leixing: 13, //获取分享海报片
					}
				}).then(res => {
					console.log("555", res);
					res.result.data.forEach((item, index) => {
						this.list.push(item.url)
					})
				})
			},
			fanhui() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			setThumbsSwiper() {
				this.$refs.zSwiper.swiper.on("beforeMount", (swiper) => {
					this.$refs.zSwiper.swiper.params.thumbs.swiper = this.$refs.zSwiperThumbs.swiper;
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.haibao {
		margin-top:80rpx;
		position: relative;
		z-index: 2;
	}

	.biaotou {
		position: fixed;        /* 改为固定定位，相对于浏览器窗口定位 */
		z-index: 999;           /* 提高层级，确保覆盖其他元素 */
		top: 0;                 /* 顶部距离为0，固定在页面顶部 */
		left: 0;                /* 左侧距离为0，占据整个宽度 */
		right: 0;               /* 右侧距离为0，确保水平铺满 */
		display: flex;          
		height: 60rpx;
		padding-top: 20rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: white;
		background-color: #FD4A50;
	}
	.zhuangshi{
		position: fixed;        /* 改为固定定位，相对于浏览器窗口定位 */
			z-index: 1;           /* 提高层级，确保覆盖其他元素 */
			top: 80rpx;                 /* 顶部距离为0，固定在页面顶部 */
			left: 0;                /* 左侧距离为0，占据整个宽度 */
			right: 0;               /* 右侧距离为0，确保水平铺满 */
			display: flex;          
			height: 200rpx;
			padding-top: 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: white;
			background-size: cover;
			border-radius: 0 0 90rpx 90rpx;
			box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.2);  /* 可选：添加阴影增强立体感 */
			background-color: #FD4A50;
			background-image: url('');
	}
	.demo-swiper {
		.thumbImage {
			height: 200rpx;
			width: 100%;
		}
	}
	.box {
		margin-bottom: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 0 35rpx 5rpx 35rpx;
		image {
			width: 100%;
		}
	}
</style>